<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 排序（Sortable） - 门户组件（Portlets）</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  body {
    min-width: 520px;
  }
  .column {
    width: 170px;
    float: left;
    padding-bottom: 100px;
    background-color: pink;
    border: 2px;
  }
  .portlet {
    margin: 0 1em 1em 0;
    padding: 0.3em;
  }
  .portlet-header {
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
  }
  .portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
  }
  .portlet-content {
    padding: 0.4em;
  }
  .portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
  }
  </style>
  <script>
  $(function() {
    $( ".column" ).sortable(
      {
      connectWith: ".column",
      }
    );
 
    
  });

  $().ready(function(e) {
       //拖拽复制体
       $('#draggable').draggable({
		   helper:"clone",
		   cursor: "move"
		 });

		//释放后
	   $('.column').droppable({
			drop:function(event,ui){
                console.log(event,ui)
				// $(this).children().remove();
				var source = ui.draggable.clone();
				$('<img/>', {
					src: 'btn_delete.png',
					style:'display:none',
					click: function() {
					  source.remove();
					}
				}).appendTo(source);

				source.mouseenter(function () {
					$(this).find("img").show();
				});

				source.mouseleave(function () {
					$(this).find("img").hide();
				});

				$(this).append(source);

			}
		});
     });
  </script>
</head>
<body>
  <h2 id="draggable"><button type="button" class="btn btn-default">button2</button>333</h2>


<div class="column" style="background-color: red;">
  
  <!-- <button type="button" class="btn btn-danger">button1</button> -->
  <h2>hello1</h2>
  
</div>
 
<div class="column">
  
  <!-- <button type="button" class="btn btn-default">button2</button> -->
  <h2><button type="button" class="btn btn-default">button2</button>222</h2>
  
 
</div>
 
<div class="column">
 
  
  <!-- <button type="button" class="btn btn-default">button4</button> -->
  <h2>hello3</h2>
 
</div>
 
 
</body>
</html>